<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">更新记录</view>
		</cu-custom>
		<view class="tui-log">
			<tui-time-axis>
				<tui-timeaxis-item v-for="(item,index) in logList" :key="index">
					<template v-slot:node>
						<view class="tui-node">
							<text class="cuIcon-discoverfill" :style="[{color:'1.1.6'==item.version?'rgb(92, 141, 255)':'#ddd'}]"></text>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-content-log" :class="['1.1.6'==item.version?'':'tui-log-gray']">
							<view class="tui-version-date">{{logList.length-1==index?item.version:'V'+item.version}}（{{item.date}}）</view>
							<view v-for="(model,index2) in item.log" :key="index2" class="tui-log-text">{{model}}</view>
						</view>
					</template>
				</tui-timeaxis-item>
			</tui-time-axis>
		</view>
	</view>
</template>

<script>
	import tuiTimeAxis from "@/colorui/components/time-axis/time-axis"
	import tuiTimeaxisItem from "@/colorui/components/timeaxis-item/timeaxis-item"
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				height:this.screenHeight,
				logList: [{
					version: "preface",
					date: "2019-06-01",
					log: ["本项目稳定后，会同步更新到微信小程序，支付宝小程序，百度小程序，头条小程序等"]
				}, {
					version: "1.0.0",
					date: "2019-09-15",
					log: ["1.【地图】新增拖拽定位功能", "2.【扩展】新增基础组件，包括：字体图标，按钮，Grid宫格，List列表，Card卡片...", "3.【扩展】新增数字键盘", "4.【扩展】新增时间轴",
						"5.完善thor(个人中心)功能，包括：关于Thor UI，模拟登录，GitHub地址复制，赞赏，反馈，更新日志等", "6.已知bug修复，以及部分功能优化"
					]
				}, {
					version: "1.1.1",
					date: "2019-09-17",
					log: ["1.新增组件NumberBox数字框:可设置步长，支持浮点数，支持调整样式(可单独设置)", "2.新增组件Rate评分:可设置星星数，可设置大小颜色",
						"3.新增聊天模板，包含：消息列表，好友列表，聊天界面等", "4.新增商城模板,包含：商城首页，商城列表，商城详情等", "5.优化部分体验"
					]
				}, {
					version: "1.1.2",
					date: "2019-09-20",
					log: ["1.修复部分兼容性问题", "2.修复部分已知bug"]
				}, {
					version: "1.1.3",
					date: "2019-09-25",
					log: ["1.新增组件Modal弹框:可设置按钮数，按钮样式，提示文字样式等，还可自定义弹框内容。", "2.修复已知bug", "3.ThorUI组件文档地址：http://www.donarui.com/"]
				}, {
					version: "1.1.4",
					date: "2019-09-30",
					log: ["1.新增倒计时组件:时分秒倒计时，支持设置大小，颜色等。", "2.新增分隔符组件:Divider分隔符，可设置占据高度，线条宽度，颜色等。", "3.新增卡片轮播:包含顶部轮播，秒杀商品轮播等。",
						"4.已知问题修复以及优化。"
					]
				}, {
					version: "1.1.5",
					date: "2019-10-05",
					log: ["1.修复H5端发行报错的问题。", "2.扩展基础组件(保留了之前版本):alert、tips、button、toast。", "3.新增表单验证功能，只需配置相应验证即可。", "4.新增返回顶部组件,nvue返回顶部看首页[nvue商品列表]。", "5.优化部分页面，修复已知bug。"]
				}, {
					version: "1.1.6",
					date: "2019-10-17",
					log: ["1.新增日期时间选择器组件。", "2.H5新增复制文本功能。","3.新增悬浮按钮组件。","4.新增Tabbar组件。","5.新增tabs标签页组件。","6.新增折叠面板组件。","7.新增图片上传组件。","8.NumberBox组件优化调整。","9.Modal组件优化调整。","10.sticky组件优化调整。","11.countdown组件优化调整。"]
				}].reverse()
			}
		},
		components:{
			tuiTimeAxis,
			tuiTimeaxisItem
		},
		computed: {
			...mapGetters(['Style','Font','BackGround','BackGroundBox'])
		},
		methods: {

		},
	}
</script>

<style>
.container {
		overflow: hidden;
	}

	.tui-header {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #999;
		height: 54upx;
		line-height: 54upx;
		background: #fff8d5;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 999999;
	}

	.tui-version {
		color: #f54f46;
		font-weight: bold;
	}

	.tui-log {
		padding: 84upx 80upx 30upx 40upx;
		box-sizing: border-box;
	}

	.tui-node {
		padding: 3px 0;
	}

	.tui-content-log {
		border-radius: 10upx;
		position: relative;
		padding: 20upx 26upx;
		font-size: 28upx;
		color: #fff;
		background: #5c8dff;
		border: 1upx solid #5c8dff;
		display: inline-block;
	}

	.tui-content-log::before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		top: 14upx;
		border: 16upx solid;
		right: 100%;
		border-color: transparent #5c8dff transparent transparent;
	}

	.tui-log-gray {
		background: #ededed !important;
		border: 1upx solid #ededed !important;
		color: #999 !important;
	}

	.tui-log-gray::before {
		border-color: transparent #ededed transparent transparent !important;
	}

	.tui-version-date {
		font-size: 32upx;
		font-weight: bold;
		padding-bottom: 20upx;
	}
</style>
